<template>
  <el-form
    ref="form"
    :model="formSearch"
    label-position="left"
    label-width="100px"
    size="small"
    class="formSearch"
  >
    <!-- <el-row>
      <el-col :span="8">
        <el-form-item label="按省份选择：">
          <el-select
            v-model="formSearch.cityLevel"
            style="width: 130px"
            placeholder="省份："
          >
            <el-option
              v-for="item in provincelist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label-width="0">
          <el-select
            v-model="formSearch.city"
            style="width: 130px"
            placeholder="城市："
            :disabled="!formSearch.cityLevel"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row> -->
    <!-- <el-row>
      <el-col :span="24">
        <el-form-item label="区域选择：">
          <ul class="quyuList">
            <li v-for="(item, i) in quyuList" :key="i" class="curp">
              {{ item.title }}
            </li>
          </ul>
        </el-form-item>
      </el-col>
    </el-row> -->
    <el-row v-for="(item, key) in filteroptions" :key="key">
      <el-col :span="24">
        <el-form-item :label="item.title + '：'">
          <ul class="quyuList">
            <li
              v-for="(itemo, j) in item.option"
              :key="j"
              @click="searchForm(key, j)"
            >
              <span
                :class="formSearch[key] == j ? 'addColor curp' : 'curp'"
                >{{ itemo }}</span
              >
            </li>
          </ul>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="排序方式：">
          <ul class="quyuList order">
            <li
              v-for="(item, key) in sortTypeList"
              @click="searchSort(item, key)"
              :key="key"
            >
              <span :class="formSearch.order == key ? 'addColor curp' : 'curp'">
                {{ item }}</span
              >
              <div
                :class="
                  formSearch.orderType == 'asc' && formSearch.order == key
                    ? 'up active'
                    : 'up'
                "
                v-if="key != 'normal'"
              ></div>
              <div
                :class="
                  formSearch.orderType == 'desc' && formSearch.order == key
                    ? 'down active'
                    : 'down'
                "
                v-if="key != 'normal'"
              ></div>
              <!-- <div class="right" v-if="key != 'normal'">
                <span :class="formSearch.orderType == 'asc'&&formSearch.order == key?'addColor el-icon-caret-top':'el-icon-caret-top'"></span>
                <span :class="formSearch.orderType == 'desc'&&formSearch.order == key?'addColor el-icon-caret-bottom':'el-icon-caret-bottom'"></span>
                <div class="up"></div>
                <div class="down"></div>
              </div> -->
            </li>
          </ul>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  components: {},
  props: {
    provincelist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    cityList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    quyuList: {
      type: Array,
      default: () => {
        return [{ title: "不限" }];
      },
    },
    //驾照类型
    filteroptions: {
      type: Object,
      default: () => {
        return {};
      },
    },

    //价格区间
    sortTypeList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formSearch: {
        type: 0,
        price: 0,
        order: "normal",
        orderType: null,
      },
    };
  },
  watch: {
    formSearch: {
      deep: true,
      handler: function (val) {
        this.$emit("search", val);
      },
    },
  },
  methods: {
    searchForm(key, idx) {
      this.formSearch[key] = idx;
    },
    searchSort(key, idx) {
      this.formSearch.order = idx;
      if (idx == "price") {
        this.formSearch.orderType =
          this.formSearch.orderType == "asc" || !this.formSearch.orderType
            ? "desc"
            : "asc";
      }
      if (idx == "score") {
        this.formSearch.orderType =
          this.formSearch.orderType == "asc" || !this.formSearch.orderType
            ? "desc"
            : "asc";
      }
      if (idx == "normal") {
        this.formSearch.orderType = null;
      }
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep {
  input::-webkit-input-placeholder {
    color: #898989;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #898989;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #898989;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #898989;
  }
  .el-form-item__label {
    color: #3a3a3a;
    font-size: 16px;
  }
}
.formSearch {
  font-size: 16px;
  color: #898989;
  border-bottom: 1px solid #eee;
  padding: 30px;
  padding-bottom: 10px;
  .quyuList {
    display: flex;
    flex-wrap: wrap;
    li {
      font-size: 16px;
      position: relative;
      margin-right: 42px;
      .down {
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        top: 18px;
        left: 40px;
        border-top: 5px solid #d8d8d8;
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        &.active {
          border-top: 5px solid #449bff;
        }
      }
      .up {
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        top: 4px;
        left: 40px;
        border-top: 5px solid transparent;
        border-bottom: 5px solid #d8d8d8;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        &.active {
          border-bottom: 5px solid #449bff;
        }
      }
      .addColor {
        color: #449bff;
      }
    }
  }
  .order {
    li {
      display: flex;
      font-size: 16px;
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        justify-content: center;
        font-size: 12px;
      }
    }
  }
}
</style>